<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="addButton">添加元素</button>
    <script>
      function throttled(fn, delay) {
        let timer = null;
        let starttime = Date.now();
        return function () {
          let curTime = Date.now(); //
          let remaining = delay - (curTime - starttime); //
          console.log(remaining);
          let context = this;
          let args = arguments;
          clearTimeout(timer);
          if (remaining <= 0) {
            fn.apply(context, args);
            starttime = Date.now();
          } else {
            timer = setTimeout(fn, remaining);
          }
        };
      }
      function throttled2(fn, delay = 500) {
        let timer = null;
        return function (...args) {
          if (!timer) {
            timer = setTimeout(() => {
              fn.apply(this, args);
              timer = null;
            }, delay);
          }
        };
      }
      function kkx() {
        console.log("张飞");
      }
      const kkxth = throttled2(kkx, 800);
      const addButton = document.getElementById("addButton");

      addButton.addEventListener("click", () => {
        kkxth();
      });
    </script>
  </body>
</html>
